<template>
  <el-dialog :title="!dataForm.userTradeId ? '新增' : '查看'"
             :close-on-click-modal="false"
             :visible.sync="visible">
    <el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="100px">

      <el-form-item label="会员姓名">
        <el-col :span="8">
          <el-form-item prop="userName">
            <el-select v-model="dataForm.userId"
                       placeholder="请选择"
                       @change="selectUser"
                       :disabled="dataForm.userTradeId ? true : fasle">
              <el-option v-for="user in userList"
                         :key="user.userId"
                         :label="user.nickName"
                         :value="user.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="充值/消费金额"
                    prop="count">
        <el-input v-model="dataForm.count" :disabled="dataForm.userTradeId ? true : fasle"></el-input>
      </el-form-item>
      <el-form-item label="余额"
                    prop="account">
        <el-input v-model="dataForm.account" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="创建时间"
                    prop="createTime"
                    v-show="false">
        <el-input v-model="dataForm.createTime"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary"
                 @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        roleList: [],
        provinceList: [],
        userList: [],
        dataForm: {
          userTradeId: null,
          userId: null,
          userName: null,
          count: null,
          account: null,
          createTime: null,
          currentAcount: null
        },
        dataRule: {
        }
      }
    },
    methods: {
      init (userTradeId) {
        this.dataForm.userTradeId = userTradeId || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.userList = []
          this.dataForm.userId = null
          if (this.dataForm.userTradeId) {
            this.$http({
              url: this.$http.adornUrl(`/user/trade/${this.dataForm.userTradeId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({ data }) => {
              console.log(data)
              this.dataForm = data
              this.dataForm.userTradeId = data.userTradeId
              this.dataForm.userId = data.userId
              this.dataForm.userName = data.userName
              this.dataForm.count = data.count
              this.dataForm.account = data.account
              this.dataForm.createTime = data.createTime
            })
          }
        })
        this.listUserAll().then(({ data }) => {
          this.userList = data
        })
      },
      listUserAll () {
        return this.$http({
          url: this.$http.adornUrl(`/admin/user/listAll`),
          method: 'get'
        })
      },

      // 选择会员
      selectUser (val) {
        this.dataForm.userId = val
        this.dataForm.currentAcount = null
        this.dataForm.account = null
        if (this.dataForm.userId) {
          this.$http({
            url: this.$http.adornUrl(`/user/trade/account/${this.dataForm.userId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            this.dataForm.currentAcount = data
            this.dataForm.account = data
          })
        }
      },
      // 表单提交
      dataFormSubmit () {
        for (let i = 0; i < this.userList.length; i++) {
          if (this.userList[i].userId === this.dataForm.userId) {
            // 将会员名字保存起来
            this.dataForm.userName = this.userList[i].nickName
          }
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/user/trade'),
              method: this.dataForm.userTradeId ? 'put' : 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({ data }) => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$refs['dataForm'].resetFields()
                  this.$emit('refreshDataList')
                }
              })
            })
          }
        })
      }
    },
    watch: {
      'dataForm.count': function (val, oldVal) {
        // console.log(val)
        if (this.dataForm.currentAcount) {
          this.dataForm.account = Number(this.dataForm.currentAcount) + Number(val)
        }
      }
    }
  }
</script>

<style>
</style>
